{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Creating Interactive Figures\n",
    "\n",
    "This notebook will demonstrate how you can use pywwt to create [interactive figures](https://journals.aas.org/graphics-guide/#interactive_figures) suitable for submission to a journal such as [*The Astrophysical Journal*](https://apj.aas.org/).\n",
    "\n",
    "**This won't work correctly with the new viewer!! pywwt won't have the right internal state.**\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "\n",
    "## Step 1: Setting up WWT\n",
    "\n",
    "First, we need to connect to the WWT app. If WWT isn't running yet, activate the JupyterLab command palette from the View menu, and select \"WorldWide Telescope\". Then all we need to do is run:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from pywwt.jupyter import connect_to_app\n",
    "wwt = await connect_to_app().becomes_ready()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We'll also set up a utility function to help us locate data files stored alongside this notebook:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def datapath(*args):\n",
    "    from os.path import join\n",
    "    return join('data', *args)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "\n",
    "## Step 2: Inserting Some Data\n",
    "\n",
    "An interactive figure should presumably have some data in it to show off. Here, we'll just load up some of the data used in the other tutorials to show the general principles.\n",
    "\n",
    "We'll start by displaying a WISE 12µm image towards the [Westerhout 5 star forming region](https://en.wikipedia.org/wiki/Westerhout_5):\n",
    "\n",
    "<!-- TODO: get data table export working and add the GRB table! -->"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "w5_img = wwt.layers.add_image_layer(datapath('w5.fits'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now is a good time to play around with the visualization parameters of the image, if you'd like. Executing the following line will create some UI elements that let you tune the colormap, stretch, and so on:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "w5_img.controls"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Likewise you can control the settings used for the all-sky contextual imagery:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "wwt.layer_controls"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "\n",
    "## Step 3: Exporting to standalone HTML\n",
    "\n",
    "pywwt, like all Jupyter widgets, is at its heart web-based. We've been working on building the technology to extract the visualizations that you create from Jupyter into standalone web assets that can be included anywhere that you can host HTML + JavaScript + CSS. This trio of technologies is exactly how [interactive figures](https://journals.aas.org/graphics-guide/#interactive_figures) in the AAS journals work!\n",
    "\n",
    "Once you've set up your viewer, exporting is easy:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "wwt.save_as_html_bundle('figure.zip')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "After a few seconds, you should see a file named `figure.zip` appear in the folder view sidebar to the left of this notebook. What's cool is that *even if you're running this notebook in the cloud*, you can right-click that file and select \"Download\" to save the Zip bundle to your local machine.\n",
    "\n",
    "If you were to open up this Zip file and inspect its contents, you'd see that it contains an `index.html` file, some JavaScript, and a `data` directory containing a FITS file correspond to the image that you just loaded into your view."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "\n",
    "## Example 1: Submitting the figure to a journal\n",
    "\n",
    "It’s a bit beyond the scope of this notebook to describe the full submission process here. But the key thing is that the `figure.zip` file has virtually everything you need to include an interacting figure in an [AAS journal](journals.aas.org/). See [this blog post by Peter Williams](https://newton.cx/~peter/2019/creating-aas-interactive-figures/) for a detailed guide involving similar files created with the [AAS Timeseries Tool](https://aas-timeseries.readthedocs.io/)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "\n",
    "## Example 2: Including the figure on a personal website\n",
    "\n",
    "The same files that you submit to a journal can also be included on your own website, if your authoring platform allows you to upload arbitrary files and use HTML [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) tags. Here’s a minimal sample HTML file, assuming that you have unpacked your Zip bundle into a directory named `my_figure`:\n",
    "\n",
    "```html\n",
    "<!DOCTYPE html>\n",
    "\n",
    "<html lang=\"en\">\n",
    "  <head>\n",
    "    <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">\n",
    "    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">\n",
    "    <style type=\"text/css\">\n",
    "      .intfig { width: 600px; height: 400px; }\n",
    "    </style>\n",
    "  </head>\n",
    "  <body>\n",
    "    <h1>Welcome to My Personal Webpage</h1>\n",
    "    <p>Explore the data from my latest paper!</p>\n",
    "    <iframe class=\"intfig\" src=\"my_figure/index.html\">\n",
    "      <p>Unfortunately your browser doesn’t support iframes.</p>\n",
    "    </iframe>\n",
    "  </body>\n",
    "</html>\n",
    "```\n",
    "\n",
    "Most of this is just boilerplate — the key is the `<iframe>` line and the CSS styling that sets it to the correct size."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "\n",
    "## Example 3: Playing with a figure on your own computer\n",
    "\n",
    "If you have [Node.js](https://nodejs.org/en/) installed on your computer, you can view your exported interactive figure in a relatively straightforward way:\n",
    "\n",
    "1. Unpack the Zip file\n",
    "2. In a terminal, `cd` to the unpacked directory (the one containing `index.html`).\n",
    "3. Run: `npx http-server`\n",
    "4. Open a browser to the URL printed by the program.\n",
    "\n",
    "**Note**: alas, we have a race condition bug that sometimes pops up here. You might need to reload the page for all of your data to appear.\n",
    "\n",
    "Other one-liner web servers might work, but not all of them serve files with the correct `Content-Type` headers, which is needed for everything to work here."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "\n",
    "## Next Steps\n",
    "\n",
    "To learn more about how to load image data into pywwt, check out the [Visualizing Imagery](./Visualizing%20Imagery.ipynb) tutorial."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "---\n",
    "\n",
    "## Credits\n",
    "\n",
    "This notebook was prepared by:\n",
    "\n",
    "- O. Justin Otor\n",
    "- Thomas Robitaille\n",
    "- Peter K. G. Williams"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
